<template>
  <div class="videoFormContainer">
    <Drawer
      :title="formData.title"
      :value="formData.showForm"
      width="500"
      @on-close="handleCancel"
      :mask-closable="false"
    >
      <Form :model="form" :label-width="120" :rules="rules" ref="form">
        <Row>
          <FormItem label="文档名称：" prop="name">
            <Input v-model="form.name" :maxlength="NAME_LENGTH_LIMIT" placeholder="请输入文档名称" />
          </FormItem>
        </Row>
        <Row>
          <FormItem label="培训类型：" prop="train_type">
            <Select v-model="form.train_type" :disabled="readonly">
              <Option :value="item.code" v-for="item in eprList" :key="item.code">{{item.name}}</Option>
            </Select>
          </FormItem>
        </Row>
        <Row>
          <FormItem label="文档上传：" prop="train_type">
            <div class="frow faic fjcsb">
              <Input v-model="form.videoName" :maxlength="NAME_LENGTH_LIMIT" class="videoName slh" />
              <Upload
                :action="action"
                :show-upload-list="false"
                :on-success="uploadSuccess"
                :on-format-error="uploadError"
                :max-size="51200"
                :on-exceeded-size="overSize"
                class="widthUpload"
              >
                <Button icon="ios-cloud-upload-outline">请上传50M以内的文件</Button>
              </Upload>
            </div>
          </FormItem>
        </Row>
      </Form>
      <div class="frow fjcc">
        <Button type="default" @click="handleCancel" class="mr20">{{formData.type=='2'?'关闭':'取消'}}</Button>
        <Button type="primary" @click="handleSubmit" v-if="!readonly">确定</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import mixin from '@/mixin'
export default {
  name: 'videoFormContainer',
  mixins: [mixin],
  props: {
    formData: Object
  },
  data () {
    return {
      form: {},
      eprList: [],
      rules: {},
      action: `${window.$config.host}${window.$config.modules.file}/manage/upload`, // 上传地址
      videoName: ''
    }
  },
  watch: {
    formData (newValue) {
      console.log(newValue)
      this.form = newValue.info
    }
  },
  computed: {
    readonly () {
      return this.formData.type == '2'
    }
  },
  methods: {
    // 取消
    handleCancel () {
      this.$refs.form.resetFields()
      this.$emit('handleCancel')
    },
    // 确定
    handleSubmit () {
      console.log(this.tableData)
    },
    overSize () {
      this.$Notice.warning({ title: '文档大小不超过50M' })
    },
    // 照片上传成功.
    uploadSuccess (res) {
      if (res.desc === 'success') {
        this.$Notice.success({
          title: '文档上传成功'
        })
        this.userForm.imageUrl =
          `${window.$config.host}${window.$config.modules.file}` +
          res.data.fileUrl // 地址
      }
    },
    // 上传失败
    uploadError (d) {
      this.$Notice.error({
        title: '文档上传失败'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.videoName {
  width: 120px;
  height: 32px;

}
</style>
